<template>
  <div>
    <div class="item c">
      <div class="tit">{{ title }}</div>
      <div class="input flex">
        <div class="c">
          <el-upload
            class="upload-demo"
            :action="url"
            name="Files"
            :data="uploadData"
            :headers="upLoadHeader"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-success="handleSuccess"
            :file-list="fileList"
            :on-error="uploadError"
          >
            <i
              class="el-icon-plus avatar-uploader-icon"
              style="
                margin-right: 10px;
                border: 1px dashed #8c939d;
                border-radius: 8px;
                line-height: 98px;
                color: #8c939d;
                width: 148px;
                height: 98px;
                font-size: 30px;
              "
            ></i>
          </el-upload>
        </div>
        <div class="tips">
          <br /><span v-if="size">建议尺寸: {{ size }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/api.js";
export default {
  name: "SetImg",
  props: {
    moduleData: { //要编辑图片的模块数据
      type: Object,
      required: true,
      default: {}
    },
    title: {  //图片标题
      type: String,
      default: '上传图片'
    },
    size: { //建议上传的图片尺寸
      type: String,
      default: ''
    },
    isBgImg: {  //要上传的图片是否是背景图片
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileList: [],
      url: "",
      uploadData: {
        Module: "HomeCustom",
      }
    };
  },
  created() {
    this.url = api.url + "/api/Common/Files/Upload";
  },
  methods: {
    //删除文件
    deleFile() {
      this.isBgImg ? (this.moduleData.bgImg = "") : (this.moduleData.url = "");
    },
    // 上传失败
    uploadError() {
      this.$message.error("图片上传失败,请重新上传");
    },
    // 上传成功
    handleSuccess(file, fileList) {
      if (file.businessStatus == 1) {
        if (this.isBgImg) {
          this.moduleData.bgImg = file.data.fileUrl;
        } else {
          this.moduleData.url = file.data.fileUrl;
        }
      } else {
        if (this.isBgImg) {
          this.moduleData.bgImg = "";
        } else {
          this.moduleData.url = "";
        }
        this.$message.error("上传失败,请重新上传");
      }
    },
  },
};
</script>
